<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical" :default-active="$route.path"
    text-color="#fff" router :collapse="isCollapse">
    <el-sub-menu index="1">
      <template #title>
        <el-icon>
          <User />
        </el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/users">用户列表</el-menu-item>
      <el-menu-item index="/addUser">添加用户</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <el-icon>
          <School />
        </el-icon>
        <span>学生管理</span>
      </template>
      <el-menu-item index="/students">学生列表</el-menu-item>
      <el-menu-item index="/addStudent">添加学生</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon>
          <OfficeBuilding />
        </el-icon>
        <span>宿舍楼管理</span>
      </template>
      <el-menu-item index="/dorms">宿舍楼列表</el-menu-item>
      <el-menu-item index="/addDorm">添加宿舍楼</el-menu-item>
    </el-sub-menu>

    <!-- 新增的旷寝管理菜单 -->
    <el-sub-menu index="4">
      <template #title>
        <el-icon>
          <List />
        </el-icon>
        <span>旷寝管理</span>
      </template>
      <el-menu-item index="/absences">旷寝记录</el-menu-item>
      <el-menu-item index="/addAbsence">添加旷寝记录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
import { User, School, OfficeBuilding, List } from '@element-plus/icons-vue'

export default {
  components: {
    User,
    School,
    OfficeBuilding,
    List
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  border-right: none;
}
</style>